<template>
  <aside>
    <img src="../../assets/img/logo.jpg"
         class="logo">
    <el-menu :default-active="activeIndex">
      <el-menu-item index="1">
        <i class="iconfont iconxueyuan"></i>
        <router-link to="material"
                     tag="span">素材管理</router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="iconfont iconperson"></i>
        <router-link to="userInfo"
                     tag="span">用户信息</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="iconfont iconshezhi"></i>
        <router-link to="settings"
                     tag="span">系统设置</router-link>
      </el-menu-item>
      <el-menu-item class="quit"
                    @click="quit">
        <i class="iconfont icontuichu"></i>
        <span>退出</span>
      </el-menu-item>
    </el-menu>
  </aside>
</template>

<script>
export default {
  data() {
    return {
      current_url: "",
      activeIndex: "1"
    };
  },
  mounted() {
    this.current_url = this.$route.name;
    let href = window.location.href.split("/")[
      window.location.href.split("/").length - 1
    ];
    switch (href) {
      case "material":
        this.activeIndex = "1";
        break;
      case "userInfo":
        this.activeIndex = "2";
        break;
      case "settings":
        this.activeIndex = "3";
        break;
    }
  },
  methods: {
    quit() {
      this.axios({
        methods: "get",
        url: "/admin/exitLogin"
      })
        .then(res => {
          if (res.data.code === 0) {
            this.message(res.data.msg, "success");
            this.$router.push("/login");
          } else {
            this.message(res.data.msg, "error");
          }
        })
        .catch(error => {
          this.message(error, "error");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.logo {
  width: 120px;
  margin: 40px auto 30px;
  border-radius: 50%;
}
.el-menu {
  border: none;
  span {
    font-size: 1.1em;
    font-weight: 500;
    padding: 10px;
    padding-right: 30px;
  }
}
.quit {
  position: fixed;
  left: 3.5%;
  bottom: 10px;
}
</style>